<template>
  <div class="orgnazition-show">

    <!-- 查询条件-->
    <el-form :inline="true" :model="searchData" class="filter-form">
      <el-row :gutter="0">
        <el-col :span="6">
          <el-input placeholder="请输入机构名称" v-model="searchData.organizationName"></el-input>
        </el-col>
        
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="primary" icon="el-icon-refresh-right" @click="reSearch()">重置</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-refresh-right" @click="addOrg()">新增机构</el-button>
        </el-col>
      </el-row>
    </el-form>
    </br>

    <!-- 加边框 -->
    <el-table :data="tableData" height="800" style="width: 100%" border>
      <el-table-column fixed prop="orgId" label="机构ID" width="150" align="center">
      </el-table-column>
      <el-table-column prop="orgNumber" label="机构编号" width="120">
      </el-table-column>
      <el-table-column prop="orgAvator" label="机构头像" width="120">
        <!-- 自定义单元格模板 -->
        <template slot-scope="scope">
          <div class="avatar-container">
            <img :src="scope.row.orgAvator" class="org-avatar-img" :alt="scope.row.orgName"></img>
          </div>

        </template>
      </el-table-column>
      <el-table-column prop="orgName" label="机构名称" width="220">
      </el-table-column>
      <el-table-column prop="docterName" label="负责人" width="150" align="center">
      </el-table-column>
      <el-table-column prop="docterPhone" label="联系电话" width="210" align="center">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="200" align="center">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.orgState" active-color="#ff4949" inactive-color="#13ce66"
						active-text="禁用" inactive-text="启用" :active-value="2" :inactive-value="1"
						@change="changeState(scope.row)">
					</el-switch>
				</template>
			</el-table-column>
      <el-table-column prop="orgAddress" label="机构地址" width="210">
      </el-table-column>
      <el-table-column prop="orgDesc" label="机构简介" width="410">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.row.orgId)" type="button" size="small">
            移除
          </el-button>
          <el-button @click.native.prevent="updateRow(scope.row)" type="button" size="small">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[8, 16]"
      :page-size="8" :current-page="searchData.pageNo" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import router from '@/router'
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
      searchData: {
        organizationName: '',
        pageNo: 1,
        pageSize: 8
      },
      total: 0,
      form: {
                title: '',
                orgId: 0,
                orgNumber: '',
                orgName: '',
                orgAddress: '',
                docterId: '',
                orgState: 0,
                orgDesc: '',
                orgAvator: ''
            }
    }
  }, created() {
    this.initTabeData()
  }, methods: {
    changeState(row){
      axios.get("api/org/changeState?orgId="+row.orgId+"&orgState="+row.orgState).then((resp) => {
        this.$message({message: resp.data.msg,type:'success'});
      }) 
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.searchData.pageNo = 1
      this.initTabeData()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchData.pageNo = val
      
      this.initTabeData()
      console.log(`当前页: ${val}`);
    },
    initTabeData() {
      console.log("查询条件：" + JSON.stringify(this.searchData))
      axios.post("/api/org/findList", this.searchData).then(res => {
        this.tableData = res.data.data.records
        this.searchData.pageNo = res.data.data.current
        console.log("当前页码" + res.data.data.current)
        this.searchData.pageSize = res.data.data.size
        console.log("每页显示条数" + res.data.data.size)
        this.total = res.data.data.total
      })
    },
    deleteRow(orgId) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("/api/org/deleteOrg?orgId=" + orgId).then(res => {
          this.$message({
            type: 'info',
            message: '删除成功!'
          });
          router.go(0)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateRow(row) {
      this.form = row
      this.form.title = '编辑机构'
      this.$router.push(
        {
          path: '/addOrgnazition',
          query:{...this.form}
        }
      )
    }, search() {
      this.searchData.pageNo = 1
      this.initTabeData()
    }, reSearch() {
      this.searchData.organizationName = ''
      this.searchData.pageNo = 1
      this.initTabeData()
    }, addOrg() {
      this.form.title = '添加机构'
      this.$router.push(
        {
          path: '/addOrgnazition',
          query:{...this.form}
        }
      )
    }
  }


}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.orgnazition-show {
  margin-top: 20px;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 1. 头像外层容器：控制整体尺寸，居中对齐 */
.avatar-container {
  width: 50px;
  /* 容器宽度 = 头像宽度，避免图片溢出 */
  height: 50px;
  /* 容器高度 = 头像高度，保持正方形比例 */
  margin: 0 auto;
  /* 水平居中，适配表格单元格 */
  border-radius: 4px;
  /* 轻微圆角，视觉更柔和（可选） */
  overflow: hidden;
  /* 裁剪超出容器的图片（防止变形） */
  background-color: #f5f5f5;
  /* 图片加载前的背景色，避免空白 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. 头像图片：核心尺寸控制，保持比例 */
.org-avatar-img {
  width: 100%;
  /* 图片宽度充满容器 */
  height: 100%;
  /* 图片高度充满容器 */
  object-fit: cover;
  /* 关键：保持图片比例，裁剪多余部分（避免拉伸变形） */
  object-position: center;
  /* 图片居中显示（优先展示主体） */
  transition: all 0.3s;
  /* hover时的过渡动画，提升交互感 */
}
</style>